import { Swiper } from "react-vant";
import { useEffect, useState } from "react";
import { getBanner, InBanner } from "@/api/discover/banner/index";
import LozyLoadImage from "@/components/LozyLoadImage/index";

import styles from "./index.module.scss";
const Banner = () => {
  const [imgList, setImgList] = useState<InBanner[]>([]);
  useEffect(() => {
    getBanner().then((it) => {
      setImgList(it);
    });
    return () => {};
  }, []);
  return (
    <div className={styles.banner}>
      <div className={styles.banner_wrap}>
        {imgList.length > 0 ? (
          <Swiper autoplay={4000}>
            {imgList.map((it: InBanner, index) => {
              return (
                <Swiper.Item key={index}>
                  <div>
                    <LozyLoadImage src={it.pic} alt={"测试"} />
                    <div className={styles.tag}>{it.typeTitle}</div>
                  </div>
                </Swiper.Item>
              );
            })}
          </Swiper>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default Banner;
